@CHARSET "ISO-8859-1";

#arena {
	padding: 100px 50px 20px;	
	display: inline-block;
}

.arena-grid {
	display: table;
	border-collapse: collapse;
}

.arena-row {
	display: table-row;
}

.arena-cell {
	display: table-cell;
	border: 1px solid black; height : 50px;
	width: 50px;
	height: 50px;
}

.content-holder {
	position: relative;
	height: 100%;
	pointer-events: none;
}

.flipped {
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.shadow {
	display: none;
	position: absolute;
	width: 50px;
	height: 50px;
}

.attackable .shadow {
	display: block;
	background-color: red;
	opacity: 0.4;
}

.attackable-left .shadow {
	cursor: url("../images/icons/mouse/attack-left.png"), pointer;
}
.attackable-right .shadow {
	cursor: url("../images/icons/mouse/attack-right.png"), pointer;
}
.attackable-up .shadow {
	cursor: url("../images/icons/mouse/attack-up.png"), pointer;
}
.attackable-down .shadow {
	cursor: url("../images/icons/mouse/attack-down.png"), pointer;
}

.chargeable .shadow {
	display: block;
	background-color: red;
	opacity: 0.4;
	cursor: url("../images/icons/mouse/charge.png"), pointer;
}

.reachable .shadow {
	display: block;
	background-color: gray;
	opacity: 0.5;
	cursor: url("../images/icons/mouse/move.png"), pointer;
}

.selected .shadow {
	display: block;
	background-color: gold;
	opacity: 0.5;
}

.tree {
	pointer-events: none;
	
	position: absolute;
	top: -76px;
	left: -14px;
	background: url('../images/tree.png') no-repeat ;
	width: 78px;
	height: 126px;
}